<template>
  <div>
    <div class="history-hot">
      <div class="his-hot">
        <h4>历史记录</h4>
        <van-icon name="delete" @click="del()"/>
      </div>
      <div class="his-tag">
        <van-tag plain type="default" v-for="v in historyKeywordList" :key="v.id" @click="fun(v)">{{v}}</van-tag>
      </div>
    </div>
     <div class="history-hot">
      <div class="his-hot">
        <h4>热门搜索</h4>
      </div>
      <div class="his-tag">
        <van-tag plain :type="v.is_hot==1?'danger':'default'" v-for="v in hotKeywordList" :key="v.id">{{v.keyword}}</van-tag>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {GetClearHistory} from '@/request/api'
export default {
  props:['historyKeywordList','hotKeywordList'],
  name: 'H559Searchpus',

  components: {  },

  directives: {  },

  data() {
    return {
      val:''
    };
  },

  mounted() {
    
  },

  methods: {
    fun(v){
      // console.log(this.historyKeywordList);
    // console.log(v);
      this.$emit('hisNode',v);
     
    },
    del(){
      GetClearHistory().then(res=>{
        if(res.errno==0){
          Toast.success('删除成功');
          location.reload();
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
  .history-hot{
     background-color: #fff;
    
  }
  .his-hot{
    font-size:1.05rem;
    font-family: '黑体';
    color: #333;
    display: flex;
    justify-content: space-between;
    padding: 2%;
   
  }
  .his-tag{
    margin-left:2%;
    margin-bottom:1rem;
    padding-bottom: 5%
  }
  .van-tag{
      margin-right: .4rem;
      margin-top: .4rem;
  }
</style>